<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="ret"></div>
<div id="ret1"></div>
<button id = "ws">精准推送</button>
<button id = "ws1">广播推送</button>
</body>
</html>
<!-- 这两个js一定要导入 -->
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script>
    // var date = new Date().getTime();
    // var socket = new SockJS('http://localhost:8080/portfolio-stomp?token='+date);
    var socket = new SockJS('/websocket-stomp');

    /**
     * 建立成功的回调函数
     */
    socket.onopen = function() {
        console.log('open');
    };

    /**
     * 服务器有消息返回的回调函数
     */
    socket.onmessage = function(e) {
        console.log('message', e.data);
    };

    /**
     * websocket链接关闭的回调函数
     */
    socket.onclose = function() {
        console.log('close');
    };

    var stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        var count = 0;
        //订阅点对点 必须带 /user
        stompClient.subscribe('/user/topic/greetings1', function(data) {
            document.getElementById("ret").innerText = data.body;
        });
        //订阅广播
        stompClient.subscribe('/topic/greetings2', function(data) {
            document.getElementById("ret1").innerText = data.body;
        });
    });

    document.getElementById("ws").onclick = function() {
        var obj = {'toUser':'123456', 'msg' : "精准推送"};
        stompClient.send("/app/foo.handle1",{},JSON.stringify(obj));
    }

    /**
     * 广播推送
     */
    document.getElementById("ws1").onclick = function() {

        stompClient.send("/app/foo.handle2", {

        }, {
            msg: "广播推送"
        })
    }
</script>